<script setup>
defineProps(['categoryList'])
</script>

<template>
  <view class="info">
  	<navigator :url="`/pagesGoods/list/list?categoryId=${item.id}`" v-for="(item,index) in categoryList" v-bind:key="item.id" class="nav">
		<image :src="item.imageUrl" mode="scaleToFill" class="img"></image>
		<text class="name">{{item.name}}</text>
	</navigator>
  </view>
</template>

<style lang="scss" scoped>
.info{
	margin-top: 16rpx;
	display: flex;
	justify-content:space-between;
	align-items: center;
	flex-wrap: wrap;
	background-color: #fff;
	padding: 16rpx;
	.nav{
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 6rpx;
		.img{
			width: 60rpx;
			height: 60rpx;
		}
		.name{
			font-size: 24rpx;
			padding: 6rpx;
		}
	}

}
</style>
